<template>
	<view class="flex flex-col h-screen">
		<NavBarVue title="资料列表"></NavBarVue>
		<view class="py-20">
			<view class="px-30 mb-20">
				<scroll-view scroll-x>
					<view class="flex">
						<view :class="[cousts==i?'font-bold mr-30':'mr-30']" v-for="e,i in coustsList" :key="i"
							@click="getList('cousts',i)">
							<text class="text-sm">{{e}}</text>
							<view class="h-12 w-40 bg-gradient-to-r from-[#329EFF] to-[#ffffff]" v-if="cousts==i">
							</view>
						</view>
					</view>
				</scroll-view>
			</view>
			<view class="px-30">
				<scroll-view scroll-x>
					<view class="flex">
						<view :class="[tab==e.id?'font-bold mr-30':'mr-30']" v-for="e,i in tabList" :key="i"
							@click="getList('tab',e.id)">
							<text class="text-sm">{{e.name}}</text>
							<view class="h-12 w-40 bg-gradient-to-r from-[#329EFF] to-[#ffffff]" v-if="tab==e.id">
							</view>
						</view>
					</view>
				</scroll-view>
			</view>
		</view>
		<view class="flex-1 overflow-hidden">
			<scroll-view scroll-y="true" class="h-full" @scrolltolower="getCourselist" refresher-enabled
				refresher-background="transparent" :refresher-triggered="triggered" @refresherrefresh="getCourselist">
				<view class="px-30">
					<DtudyListVue v-for="e,i in studyList" :key="i" :val="e" type="1"></DtudyListVue>
				</view>
			</scroll-view>
		</view>
	</view>
</template>

<script setup>
	import {
		ref
	} from "vue"
	import {
		onShow
	} from "@dcloudio/uni-app"
	import DtudyListVue from "@/pages/tabbar/components/study/DtudyList.vue"
	import courseApi from "@/apis/apiList/courseApi"
	const cousts = ref(0)
	const coustsList = ["热门文本资料", "热门语音资料", "热门视频资料"]
	const tab = ref("")
	const tabList = ref([])
	const studyList = ref([])
	const triggered = ref(false)
	const getList = (key, val) => {
		if (key == 'cousts') cousts.value = val
		if (key == 'tab') tab.value = val
		getCourselist()
	}
	const getCouresTypelist = () => {
		courseApi.getCouresTypelist().then(res => {
			tab.value = res.data[0].id
			tabList.value = res.data
			getCourselist()
		})
	}
	const getCourselist = () => {
		triggered.value = true
		courseApi.getCourselist({
			"coursetype.id": tab.value,
			cousts: cousts.value
		}).then(res => {
			studyList.value = res.data
			triggered.value = false
		})
	}
	onShow(() => {
		getCouresTypelist()
	})
	const back = () => {
		uni.navigateBack({
			delta: 1
		})
	}
</script>

<style>

</style>